<template>
    <view class="content">
        <view class="bg"></view>
        <!-- order_status_id
            0 => '待确认', 1 => '订单已确认', 2 => '订单已取消', 3 => '订单已关闭', 4 => '待付款', 5 => '待发货', 6 => '已发货', 
            7 => '申请退货', 8 => '退货中', 9 => '已退货', 10 => '申请退款', 11 => '退款中',12 => '拒绝退款', 13 => '已退款', 
            14 => '已收货', 15 => '已完成', 16 => '已退款', 17 => '部分退款/退货', 18 => '待收货', 19 => '已送达'
        -->
        <view class="box u-p-t-30 u-p-b-30 u-font-24" v-if="isAfter == 1">
            <view class="sh">售后原因：</view>
            <view class="sh-text">{{data.apply_txt}}</view>
            <view class="sh2" v-if="data.order_status_id == 12">拒绝原因：</view>
            <view class="sh-text" v-if="data.order_status_id == 12">{{data.user_message || '无'}}</view>
        </view>
        <!-- shipping_type=0自提 1快递 -->
        <view class="top">
            <view class="down" v-if="data.shipping_type == 1">
                <view class="u-font-30 text-bold u-p-b-15">线上快递</view>
                <view>
                    <view class="add-text">
                        <text class="add-icon">地址</text>
                        <text class="add">
                            {{data.receiver_province}}{{data.receiver_city}}{{data.receiver_district}}{{data.receiver_address}}
                        </text>
                    </view>
                    <view class="u-flex">
                        <view class="add-name">{{data.receiver_name}}</view>
                        <view class="add-tel">{{data.receiver_mobile}}</view>
                    </view>
                </view>
            </view>
            <view class="ziti" v-if="data.shipping_type == 0">
                <view class="u-font-30 text-bold u-p-b-15">线下自提</view>
                <view class="add-text">
                    <text class="add-icon">地址</text>
                    <text class="add">{{data.supplier_info.contact_address}}</text>
                </view>
                <view class="u-flex u-p-t-20">
                    <view class="border-r u-p-r-20">
                        <view class="ziti-tit">提货人</view>
                        <view class="u-flex">
                            <view class="ziti-name">{{data.receiver_name}}</view>
                        </view>
                    </view>
                    <view class="u-p-l-20">
                        <view class="ziti-tit">预留电话</view>
                        <view class="u-flex">
                            <view>{{data.receiver_mobile}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="box">
			<template v-if="!isAfter">
				<view class="tran-item" v-for="(el, ind) in list" :key="ind" v-if="ind < 3 || moreShow">
					<view class="u-flex">
						<view class="u-p-r-30 text-cyan-dark">{{el.wl_title}}</view>
						<view class="u-flex-1">{{el.wl_number}}</view>
						<view class="copy" v-if="el.wl_number" @click="copy(el.wl_number)">复制</view>
					</view>
					<view class="item" v-for="(item, index) in el.order_goods" :key="index"
					    @click="$gTo(`/pages/shop/goods?id=${item.goods_id}`)">
					    <image :src="item.image_uri" mode="aspectFit" class="img"></image>
					    <view class="item-r">
					        <view class="goods-name">{{item.goods_name}}</view>
					        <view class="item-d">
					            <view class="price">￥<text class="price-num">{{item.sale_price}}</text></view>
					            <view class="num">x{{item.goods_nums}}</view>
					        </view>
					    </view>
					</view>
				</view>
			</template>
			<!-- 售后商品 -->
			<template v-if="isAfter">
				<view class="item" v-for="(item, index) in list" :key="index" v-if="index < 3 || moreShow"
				    @click="$gTo(`/pages/shop/goods?id=${item.goods_id}`)">
				    <image :src="item.image_uri" mode="aspectFit" class="img"></image>
				    <view class="item-r">
				        <view class="goods-name">{{item.goods_name}}</view>
				        <view class="item-d">
				            <view class="price">￥<text class="price-num">{{item.sale_price}}</text></view>
				            <view class="num">x{{item.goods_nums}}</view>
				        </view>
				    </view>
				</view>
			</template>
			
            
            <view class="class5" v-if="!moreShow && list && list.length > 3" @click="moreShow = true">
                <u-icon name="arrow-down" color="#6d6d6d" size="28" label="查看全部" label-pos="left" label-color="#000"></u-icon>
            </view>
            <view class="class5" v-if="moreShow && list && list.length > 3" @click="moreShow = false">
                <u-icon name="arrow-up" color="#6d6d6d" size="28" label="收起" label-pos="left" label-color="#000"></u-icon>
            </view>
            
            <view class="xiaoji">
                <view>小计</view>
                <view class="x-price">￥<text>{{data.order_amount}}</text></view>
            </view>
        </view>
        
        <view class="box u-p-t-40 u-p-b-40 u-flex">
            <view>备注</view>
            <view class="remark" v-if="isAfter == 1">{{data.order_user_message || '无'}}</view>
            <view class="remark" v-else>{{data.user_message || '无'}}</view>
        </view>
        
        <view class="box u-p-t-40 u-p-b-40 u-flex u-row-between">
            <view class="u-flex">
                <view class="quan">券</view>
                <view>优惠券</view>
            </view>
            <view>￥{{data.coupon_amount}}</view>
        </view>
        
        <view class="note">
            <view class="o-i-num">
                <view class="o-i-f">
                    <view class="o-i-l">订单编号</view>
                    <view class="o-i-r">{{data.order_no}}</view>
                </view>
                <view class="copy" @click="copy(data.order_no)">复制</view>
            </view>
            <view class="o-i">
                <view class="o-i-l">下单时间</view>
                <view class="o-i-r">{{ isAfter == 1 ? data.order_create_time : data.create_time_date}}</view>
            </view>
            <view class="o-i" v-if="data.pay_time_date || data.order_pay_time">
                <view class="o-i-l">付款时间</view>
                <view class="o-i-r">{{ isAfter == 1 ? data.order_pay_time : data.pay_time_date}}</view>
            </view>
            <view class="o-i" v-if="data.send_time_date">
                <view class="o-i-l">发货时间</view>
                <view class="o-i-r">{{data.send_time_date}}</view>
            </view>
            <view class="o-i" v-if="data.sign_time_date">
                <view class="o-i-l">收货时间</view>
                <view class="o-i-r">{{data.sign_time_date}}</view>
            </view>
            <view class="o-i" v-if="data.create_time_date && isAfter == 1">
                <view class="o-i-l">售后时间</view>
                <view class="o-i-r">{{data.create_time_date}}</view>
            </view>
        </view>
        
        <view class="foot" v-if="data.order_status_id == 4 || data.order_status_id == 5 || data.order_status_id == 6">
        	<view class="footer">
                <view>
                    <view class="u-flex" v-if="data.order_status_id == 4">
                    	<view class="pay-tit u-m-r-12">订单总额</view>
                        <view class="u-flex">
                            <view class="foot-tit">
                            	￥<text>{{data.pay_amount}}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="pay-btn" v-if="data.order_status_id == 4" @click.stop="$noMultipleClicks(toPay)">立即支付</view>
                <view class="pay-btn2" v-if="data.order_status_id == 6" @click.stop="$noMultipleClicks(doConfirm)">确认收货</view>
                <view class="pay-btn2" v-if="data.order_status_id == 5" @click.stop="$gTo(`/pages/order/after?id=${id}`)">申请售后</view>
            </view>
            <!-- <view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view> -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                moreShow: false, //查看更多
                noClick: true,//连点
                data: {},
				list: [],
                id: '',
                ost: '',
                isAfter: 0,
                type: '',
            };
        },
        onLoad(option) {
            this.type = option.type
            this.id = option.id
            this.ost = option.ost
            this.getData()
        },
        methods: {
            //导航
            // toGuide() {
            //     uni.openLocation({
            //         latitude: Number(this.data.receiver_lat),
            //         longitude: Number(this.data.receiver_lng),
            //         address: this.data.address,
            //         success: (res) => {
            //             console.log('success');
            //         },
            //         fail: (err) => {
            //             console.log(err)
            //             this.$toast('导航失败，请重试！')
            //         }
            //     });
            // },
            
            // order_status_id
            //     0 => '待确认', 1 => '订单已确认', 2 => '订单已取消', 3 => '订单已关闭', 4 => '待付款', 5 => '待发货', 6 => '已发货', 
            //     7 => '申请退货', 8 => '退货中', 9 => '已退货', 10 => '申请退款', 11 => '退款中',12 => '拒绝退款', 13 => '已退款', 
            //     14 => '已收货', 15 => '已完成', 16 => '已退款', 17 => '部分退款/退货', 18 => '待收货', 19 => '已送达'
            getData() {
                let url = '', parameter = {}
                if (this.type == 8 && (this.ost == 7 || this.ost == 8 || this.ost == 9 || this.ost == 10 || this.ost == 11 || this.ost == 12 || this.ost == 13)) {
                    this.isAfter = 1
                    
                    url = 'refundOrderInfo'
                    parameter = {
                        userToken: this.$getSync('userToken'),
                        order_id: this.id,
                    }
                } else {
                    url = 'order_detail'
                    parameter = {
                        userToken: this.$getSync('userToken'),
                        id: this.id,
                    }
                }
                
            	this.$ajax(url, parameter).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
						if (this.isAfter == 1) {
							this.list = this.data.goods_list
						} else {
							this.list = this.data.transport_goods_list
						}
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 立即支付
            toPay() {
                this.$gTo('/pages/pay/pay?id=' + this.data.order_no + '&money=' + this.data.pay_amount)
            },
            
            doConfirm() {
                this.$confirm('确认收货吗？',()=>{
                    this.$ajax('confirmGoods', {
                        userToken: this.$getSync('userToken'),
                        id: this.id,
                    }).then(ret => {
                    	if (ret.status == 0) {
                            this.$toast('确认收货成功');
                            setTimeout(() => {
                                this.$backT()
                            }, 500)
                    	} else {
                    		this.$toast(ret.message);
                    	}
                    });
                })
            },
            
            //复制订单编号
            copy(order_no) {
                uni.setClipboardData({
                    data: order_no,
                    success: function() {
                        console.log('success');
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .tran-item{
		padding-top: 20rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.tran-item:last-child{
		border-bottom: none;
	}
    
    page{
        background-color: #f5f5f5;
    }
    .content {
    	padding: 50rpx 20rpx 200rpx;
    }
    
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #00734c, #f5f5f5);
    }
    .top{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .nav>view{
        width: calc(710rpx / 2);
        text-align: center;
        padding: 15rpx 0;
        font-size: 26rpx;
    }
    .nav-l{
        background-color: #f2f3f7;
        border-radius: 20rpx 0 0 0 ;
    }
    .nav-r{
        background-color: #f2f3f7;
        border-radius: 0 20rpx 0 0 ;
    }
    .active{
        background-color: #fff;
        font-size: 30rpx;
        font-weight: bold;
    }
    .active::after{
        display: block;
        content: '';
        width: calc(710rpx / 2);
        height: 40rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0 0;
        position: absolute;
        top: -20rpx;
        z-index: -1;
    }
    .unActiveL{
        border-radius: 20rpx 0 20rpx 0;
    }
    .unActiveR{
        border-radius: 0 20rpx 0 20rpx;
    }
    
    .down{
        padding: 40rpx 25rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
    }
    
    .add-text{
        padding-bottom: 10rpx;
    }
    .add-icon{
        vertical-align: middle;
        padding: 4rpx 12rpx;
        font-size: 18rpx;
        color: #8d6036;
        background-color: #f8e4cb;
        border-radius: 5rpx;
        margin-right: 10rpx;
    }
    .add{
        vertical-align: middle;
        font-size: 36rpx;
        font-weight: bold;
    }
    .add-name{
        color: #8a8a8a;
        font-size: 28rpx;
        max-width: 380rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .add-tel{
        color: #8a8a8a;
        font-size: 28rpx;
        padding-left: 30rpx;
    }
    .ziti{
        padding: 40rpx 25rpx;
    }
    .ziti-r{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .arrow-r-022{
        width: 12rpx;
        height: 20rpx;
    }
    .del-08{
        width: 123rpx;
        height: 123rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 5rpx;
        margin-top: 40rpx;
    }
    .ziti-tit{
        font-size: 26rpx;
        color: #8a8a8a;
        padding-bottom: 5rpx;
    }
    .ziti-name{
        max-width: 370rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .write-icon{
        width: 20rpx;
        height: 21rpx;
        margin-left: 10rpx;
    }
    .border-r{
        border-right: 2rpx solid #e6e6e6;
    }
    
    
    .box{
        padding: 0 25rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
    }
    .img{
        width: 160rpx;
        height: 160rpx;
        border: 2rpx solid #e3e3e3;
        border-radius: 15rpx;
        overflow: hidden;
        margin-right: 15rpx;
    }
    .item-r{
        flex: 1;
    }
    .goods-name{
        width: 475rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 28rpx;
        font-weight: bold;
    }
    .spec{
        width: 475rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 24rpx;
        color: #6d6d6d;
        padding-top: 5rpx;
    }
    .item-d{
        padding-top: 45rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price{
        font-size: 26rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
        padding-right: 30rpx;
    }
    .deposit{
        font-size: 24rpx;
        color: #ff5f2b;
        padding: 4rpx 12rpx;
        background-color: #fff1ec;
        border-radius: 5rpx;
    }
    .num{
        flex: 1;
        font-size: 26rpx;
        color: #929292;
        text-align: right;
    }
    .class5 {
        display: flex;
        justify-content: center;
        align-items: center;
    	width: 205rpx;
    	height: 65rpx;
    	border: 2rpx solid #e4e7ed;
    	border-radius: 30rpx;
    	margin: 20rpx auto;
    }
    
    .cou{
        padding-bottom: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .quan{
        width: 30rpx;
        height: 30rpx;
        background: linear-gradient(to top, #fe332c,#fe6b2b);
        border-radius: 8rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .xiaoji{
        padding: 30rpx 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // border-top: 2rpx solid #f0f0f0;
    }
    .x-price{
        color: #f62a2a;
    }
    .x-price>text{
        font-size: 42rpx;
        font-weight: bold;
    }
    
    .remark{
        flex: 1;
        text-align: right;
        padding: 0 10rpx;
    }
    .pay-type{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #f0f0f0;
    }
    .pay-type:last-child{
        border-bottom: none;
    }
    .choose{
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
    }
    
    .foot {
    	width: 100vw;
    	background-color: #fff;
        border-top: 2rpx solid #f0f0f0;
    	position: fixed;
    	left: 0;
    	bottom: 0;
    	z-index: 10;
    }
    .footer {
        width: 100vw;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25rpx;
    }
    
    .foot-tit {
    	font-size: 26rpx;
    	line-height: 28rpx;
    	color: #f62a2a;
    	font-weight: bold;
    
    	text {
    		font-size: 42rpx;
    		line-height: 44rpx;
    
    	}
    }
    .pay-btn {
    	width: 202rpx;
    	height: 76rpx;
    	font-size: 30rpx;
    	line-height: 76rpx;
    	color: #fff;
    	text-align: center;
    	border-radius: 38rpx;
    	background: #ff8a00;
    }
    .pay-btn2 {
    	width: 202rpx;
    	height: 76rpx;
    	font-size: 30rpx;
    	line-height: 76rpx;
    	text-align: center;
    	border-radius: 38rpx;
        border: 2rpx solid #000;
        box-sizing: border-box;
    }
    
    .sh{
        color: #666666;
    }
    .sh2{
        color: #f62a2a;
        padding-top: 20rpx;
    }
    .sh-text{
        word-break: break-all;
        white-space: pre-line;
    }
    
    
    .note {
    	width: 100%;
    	border-radius: 18rpx;
    	background-color: #fff;
    	padding: 38rpx 24rpx;
    	margin-bottom: 22rpx;
    }
    .o-i-num{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .o-i-f{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        flex: 1;
    }
    .copy{
        font-size: 22rpx;
        color: #b2b2b2;
        border: 2rpx solid #b2b2b2;
        padding: 8rpx 20rpx;
        border-radius: 50rpx;
    }
    .o-i{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        padding-top: 20rpx;
    }
    .o-i-l{
        padding-right: 25rpx;
    }
    .o-i-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }

</style>
